<template>
  <div class="container">
    <div class="visual-header">
      <div class="tips-warning center">
      已添加<span class="t5"> {{familys.length}} </span>人，还能添加<span class="t5"> {{6-familys.length}} </span>人
      </div>
    </div>
    <div class="infinite-container visual-content" style="bottom:40px;">
      <div class="mg10" v-show="familys.length > 0">
        <!-- <transition-group name="slide-left" mode="out-in"> -->
        <mu-flexbox  class="family-item bgwhite animate" v-for="(f, i) in familys" :key="f.uid" >
          <mu-flexbox-item>
            <div class="family-header">
              <span class="title">{{f.realname}}</span>
              <i :class="['iconfont', f.sexcode===1 ? 'icon-iconnan': 'icon-iconnv']"></i>
              <small class="t3">{{getFamilyRalation(f.relation)}}</small>
              <span class="fr t3 f12" @click="familyClick(f, i)">修改资料<i class="iconfont icon-small-arrow-right t3 v-middle"></i></span>
            </div>
            <mu-divider />
            <div class="re">
            <p v-for="(item, index) in f.hisBusCardList" :key="index">
              {{item.patientMedicalCardName}} - {{item.patientMedicalCardNumber | lengthFilter}}
              <span v-if="item.patientIsHasBusCard === 1">(余额{{item.patientBusCardBalance | fixedMoney}})</span>
              <span v-else>(未办卡)</span>
            </p>
            <p class="color-subtext" v-show="f.hisBusCardList.length == 0">暂未绑定医院账号</p>
            <div class="right-button">
              <mu-raised-button primary class="fr small" v-if="f.certificationValidityPeriod === '1'"  @click="goBindCard(f)">认证管理</mu-raised-button>
              <mu-raised-button secondary class="fr small" v-else @click="goBindCard(f)">去认证</mu-raised-button>
            </div>
            </div>
          </mu-flexbox-item>
        </mu-flexbox>
            <!-- </transition-group> -->
      </div>
    </div>

    <div class="fixed-bottom" v-show="familys.length < 6">
        <mu-raised-button class="submit-btn no-shadow" label=" + 添加就诊人" to="/setting/family/add" fullWidth primary></mu-raised-button>
    </div>

    <mu-dialog :open="dialogGenerate">
     <div v-if="isCreateOnline">
        <div class="center">
          <p>未查询到患者预留手机，是否在线建档？</p>
        </div>
        <div class="login center mt20" >
          <mu-flat-button slot="actions" @click="dialogGenerate=false" label="否" />
          <mu-flat-button slot="actions" primary @click="createHandle" label="是" />
        </div>
     </div>
     <div v-else> 
        <div class="center">
          <p>未查询到就诊人档案，请到医院窗口建档</p>
        </div>
        <div class="login center mt20">
        <mu-flat-button primary slot="actions" @click="dialogGenerate=false" label="我知道了" />
      </div>
     </div>
    </mu-dialog>
  </div>
</template>

<script>
import {commonAjax, commonAjaxJson, RESTFUL_API} from '@/api/api'
import {CARD_TYPE, FAMILY_RALATION, HIS_CARD_TYPE} from '@/api/const'

export default {
  data () {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      familys: [],
      dialogGenerate: false,
      isCreateOnline: false,
    }
  },
  mounted () {
    this.getSysParameterList();
    this.getFamilys();
  },
  filters: {
    getHisCard (v) {
      if (v === '5') {
        return '门诊号'
      }
      return HIS_CARD_TYPE.filter(val => val.value === v)[0].label
    },
    lengthFilter(val) {
      if (val && val.length > 0) {
        if (val.length > 10) {
          return (
            val.slice(0, 4) + "****" + val.slice(val.length - 4, val.length)
          );
        } else {
          return val;
        }
      } else {
        return "";
      }
    }
  },
  methods: {
    goBindCard (f) {
      sessionStorage.editFamily = JSON.stringify(f)
      if(f.certificationValidityPeriod === "1") { //已认证
        this.$router.push({path: "/setting/bind-visitcard-modify"})
      } else {
        this.getHisPhone().then(res => {
          if (res.data.code == 200) {
            if (res.data.data && res.data.data.length > 0 ) {
              this.$router.push({path: "/setting/bind-visitcard"})
            } else {
              this.dialogGenerate = true
            }
          }
        })
      }
    },
    getCardName (cardType) {
      return CARD_TYPE.filter(v => v.value === cardType)[0].label
    },
    getFamilyRalation (relation) {
      if (relation === '0') {
        return '本人'
      }
      return FAMILY_RALATION.filter(v => v.value === relation)[0].label
    },
    getFamilys () {
      commonAjaxJson(`${RESTFUL_API.listFamily}`, { userId: sessionStorage.getItem("userId") }, true).then(res => {
          if (res.data.code == 200) {
          this.familys = res.data.data || []
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        })
    },
    familyClick (f, i) {
      sessionStorage.editFamily = JSON.stringify(f)
      this.$router.push('/setting/family/add?action=modify')
    },
    createHandle() {
      this.$router.push({
        path: "/setting/createOnline"
      })
    },
    /**
     * 查询his中是否已有账户，operationType=1查询，operationType=2建档
     * @author nied@bsoft.com.cn
     * @date 2019-11-20
     * @param {any} operationType
     * @returns {any}
     */
    getHisPhone(operationType) {
      let q = JSON.parse(
        sessionStorage.editFamily || "{listBasAccountCard: []}"
      );
      const params = {
        hospitalCode: this.hospitalCode,
        operationType: operationType || "1"
      };
      if (q.relation > 0) {
        params.fid = q.id;
      }
      return commonAjaxJson(RESTFUL_API.getHisPhone, params, true)
    },
    /**
     * 获取系统参数
     */
    getSysParameterList (){
      let params = {
        moduleId: '000000',
        parameterKey: 'ol_archivable'
      }
      commonAjaxJson(RESTFUL_API.getSysParameterList, params, true).then(res =>{
        this.isCreateOnline = res.data.data[0].parameterValue == 1
      })
    }
  },
  destroyed () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style lang="less" scoped>
.family-item {
    padding: 1em;
    margin-bottom: 0.6em;
    border-radius: 4px;
    .family-header {
      padding-bottom: .6em;
    }
    .title {
      font-size: 1.2em;
    }
    .icon-iconnan {
      color: #64A9F6;
      font-size: 1em;
    }
    .icon-iconnv {
      color: #F8868B;
      font-size: 1em;
    }
    p {
      margin: 0.6em 0 0 0;
      color: #666;
    }
    .right-button {
      position: absolute;
      right: 0;
      top: 10px;
    }
    .re {
      min-height: 40px;
    }
  }
</style>
